<template>
  <div>
    <!-- 面包屑导航中传入是否显示弹出层的数据 使用语法糖 .sync这样的简写 -->
    <!-- v-bind:属性名称 和 $emit('update:属性名称')  v-on:update:属性名称 -->
    <xw-pagenav :visible.sync="visible" />
    <!-- 表格展示 -->
    <el-card class="box-card">
      <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        :default-expand-all="true"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column header-align="center" align="center" prop="name" label="姓名" width="180"> </el-table-column>
        <el-table-column header-align="center" align="center" label="是否为菜单" width="180">
          <template slot-scope="prop">
            <el-tag type="success" size="mini" v-if="prop.row.ismenu == 1">是</el-tag>
            <el-tag type="info" size="mini" v-else>否</el-tag>
          </template>
        </el-table-column>
        <el-table-column header-align="left" prop="route" label="路由地址" width="260"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="prop">
            <el-button type="primary" size="mini">修改</el-button>
            <el-button type="danger" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <br />
      <el-pagination layout="prev, pager, next" :page-size="pageSize" :total="total" @current-change="handleChange">
      </el-pagination>
    </el-card>
    <!-- 添加弹出层 -->
    <xw-dialog :title="title" :visible.sync="visible" :addHandler="addHandler">
      <el-form slot="add" :model="formData" status-icon :rules="createRules()" ref="ruleForm" label-width="100px">
        <el-form-item label="顶级节点" prop="pid">
          <el-select v-model="formData.pid" placeholder="请选择">
            <el-option label="顶级" value="0"> </el-option>
            <el-option label="电影管理" value="1"> </el-option>
            <el-option label="权限管理" value="2"> </el-option>
            <el-option label="资讯管理" value="10"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="节点名称" prop="name">
          <el-input v-model="formData.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否为菜单" prop="ismenu">
          <el-radio v-model="formData.ismenu" label="1">是</el-radio>
          <el-radio v-model="formData.ismenu" label="0">否</el-radio>
        </el-form-item>
        <el-form-item label="路由" prop="route">
          <el-input v-model="formData.route" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
    </xw-dialog>
  </div>
</template>

<script>
import { addauthApi, authListApi } from '@/api/authApi'
export default {
  data() {
    return {
      title: '添加权限',
      visible: false,
      tableData: [
        {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          children: [
            {
              id: 31,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }
          ]
        }
      ],
      pageSize: 10,
      total: 1000,
      formData: {
        pid: '0',
        name: '',
        route: '',
        ismenu: '1'
      }
    }
  },
  mounted() {
    this.handleChange()
  },
  methods: {
    // 分页
    async handleChange(page = 1) {
      const ret = await authListApi()
      this.tableData = ret.data
    },
    addHandler() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          const ret = await addauthApi(this.formData)
          if (ret.code == 0) {
            this.$message({
              type: 'success',
              duration: 1500,
              message: '添加成功',
              onClose: () => {
                this.visible = false
              }
            })
          }
        } else {
          this.$message({
            type: 'error',
            duration: 1500,
            message: '验证失败'
          })
        }
      })
    },
    createRules() {
      return {
        name: [{ required: true, message: '必须填写' }],
        route: [
          {
            validator: (rule, value, callback) => {
              if (!value.includes('/')) {
                return callback(new Error('路由填写不合法'))
              }
              return callback()
            }
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
